<template>
  <a-table
    class="antableClass"
    ref="table"
    size="middle"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="false"
    :scroll="{ y: 230 }"
  >
    <template slot="name" slot-scope="text, record, index">
      <div style="width: 100%;min-height: 40px;display: flex;justify-content: center;align-items: center;"
       @drop.prevent="dropItemHandler($event, 'name', index)"
       @dragover.prevent="dragoverHandler($event)">
        <a-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="record.zb ? (record.zb.fieldValue || record.zb.fieldName) : ''"
          @change="e => handleChange(e.target.value, record.id, 'name', index)"
        />
        <span v-else>{{ record.zb['fieldValue'] || record.zb['fieldName'] || ' ' }}</span>
      </div>
    </template>
    <template slot="jslj" slot-scope="text, record, index">
      <div style="width: 100%;min-height: 40px;display: flex;justify-content: center;align-items: center;"
       @drop.prevent="dropItemHandler($event, 'jslj', index)"
       @dragover.prevent="dragoverHandler($event)">
        <!-- <j-dict-select-tag
          style="width:100%"
          v-if="record.editable"
          placeholder="请选择"
          dictCode="custom_logic"
          :value="text"
          @selectChange="val => handleChange(val, record.id, 'logic')"
          :getPopupContainer="getPopupContainer"
        /> -->
        <a-select :value="record.jslj ? record.jslj.id : null"
          style="width:100%"
          v-if="record.editable"
          placeholder="请选择"
          :getPopupContainer="getPopupContainer"
          @change="val => handleChange(val, record.id, 'jslj', index)">
          <a-select-option v-for="(item, index) in formulaList" :key="index"
           :value="item.id">
            {{ item.signName }}
          </a-select-option>
        </a-select>
        <span v-else-if="record.jslj">{{ record.jslj['id'] ? formulaList.find(item=>item.id==record.jslj['id']).sign : ' ' }}</span>
      </div>
    </template>
    <template slot="srcs" slot-scope="text, record, index">
      <div style="width: 100%;min-height: 40px;display: flex;justify-content: center;align-items: center;"
       @drop.prevent="dropItemHandler($event, 'srcs', index)"
       @dragover.prevent="dragoverHandler($event)">
        <a-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="record.srcs ? (record.srcs.fieldValue || record.srcs.fieldName) : ''"
          @change="e => handleChange(e.target.value, record, 'srcs', index)"
        />
        <span v-else-if="record.srcs">{{ record.srcs['fieldValue'] || record.srcs['fieldName'] || ' ' }}</span>
      </div>
    </template>
    <template slot="jxjg" slot-scope="text, record, index">
      <div style="width: 100%;min-height: 40px;display: flex;justify-content: center;align-items: center;">
        <a-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="text"
          @change="e => handleChange(e.target.value, record.id, 'jxjg', index)"
        />
        <span v-else>{{ text }}</span>
      </div>
    </template>
    <template v-if="!isCheck" slot="action" slot-scope="text, record, idx">
      <a-icon style="cursor: pointer;" v-if="record.editable" type="save" @click="Save(record.id, idx)" />
      <a-icon style="cursor: pointer;" v-else type="edit" @click="handleEdit(record.id, idx)" />
      <a-divider type="vertical" />
      <a-popconfirm v-if="!record.editable" title="确定删除吗?" @confirm="() => handleDelete(record.id, idx)">
        <a-icon style="cursor: pointer;" type="delete" />
      </a-popconfirm>
      <a-icon v-else type="close" @click="Cancel(record.id, idx)" />
      <span v-if="!editaing">
        <a-divider type="vertical" />
        <a-icon style="cursor: pointer;" type="up" @click="handleUp(record.id, idx)" />
        <a-divider type="vertical" />
        <a-icon style="cursor: pointer;" type="down" @click="handleDown(record.id, idx)" />
      </span>
    </template>
    <template slot="footer">
      <div class="drag_target" @drop.prevent="dropHandler($event)" @dragover.prevent="dragoverHandler($event)">
        <a-icon type="plus" class="darg-icon" />
        <span class="darg-text">请拖拽左侧指标到此处</span>
      </div>
    </template>
  </a-table>
</template>

<script>
export default {
  props: ['columns', 'dataSource', 'formulaList','isCheck'],
  data() {
    return {
      url: {
        list: '',
        add: '',
        remove: '',
        edit: ''
      },
      editaing: false,
      disableMixinCreated: true,
    }
  },
  methods: {
    handleDelete(id, idx) {
      this.$emit('Delete', id, idx)
    },
    dropItemHandler(event, type, idx) {
      this.$emit('dropItemHandler', type, idx);
    },
    dropHandler() {
      this.$emit('DropHandler')
    },
    getPopupContainer() {
      return document.body
    },
    dragoverHandler(ev) {
      ev.dataTransfer.dropEffect = 'move'
    },
    handleChange(value, id, col, idx) {
      this.$emit('DataChange', id, value, col, idx)
    },
    //  删除
    handleEdit(id, idx) {
      this.editaing = true
      this.$emit('Edit', id, idx)
    },
    Save(id, idx) {
      this.editaing = false
      this.$emit('SaveData', id, idx)
    },
    Cancel(id, idx) {
      this.editaing = false
      this.$emit('CancelData', id, idx)
    },
    handleUp(id, idx) {
      this.$emit('Up', id, idx)
    },
    handleDown(id, idx) {
      this.$emit('Down', id, idx)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-table-scroll {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
/deep/.ant-table-footer {
  padding: 0;
}
.drag_target {
  padding: 30px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fdff;
  .darg-icon {
    font-size: 40px;
    color: #d8e1f7;
  }
  .darg-text {
    color: #cdcece;
  }
}

.active {
  .darg-icon {
    color: #95b1f8;
  }
}

.edit-icon {
  margin-left: 5px;
  cursor: pointer;
}
</style>
